<template>
  <div>
    <el-form ref="lesson" :model="lesson" label-position="top" :rules="rules">

      <el-form-item prop="lessonName" label="服务项目名称" :required="true">
        <el-input v-model="lesson.lessonName" autocomplete="off" maxlength="50" show-word-limit />
      <!-- <el-input maxlength="15" :value="lesson.lessonName" placeholder="服务项目名称" @input="e => lesson.lessonName = validSe (e，15)" /> -->
      <!-- <el-input
            v-model="lesson.lessonName"
            maxlength="10"
            placeholder=""
          /> -->
      </el-form-item>

      <el-form-item label="服务项目类别">
        <!-- <el-input v-model="lesson.lessonType" autocomplete="off" /> -->
        <el-select v-model="lesson.lessonType" placeholder="请选择">
          <el-option
            v-for="ctype in classType"
            :key="ctype.id"
            :value="ctype.id"
            :label="ctype.typeName"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="服务项目校区">
        <!-- <el-input v-model="lesson.campus" autocomplete="off" /> -->
        <el-select v-model="lesson.campus" placeholder="请选择">
          <el-option
            v-for="item in campuslist"
            :key="item.campusId"
            :value="item.campusId"
            :label="item.campusName"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="服务项目亮点">
        <el-input v-model="lesson.lessonFeature" type="textarea" autosize maxlength="50" autocomplete="off" />
      </el-form-item>
      <el-form-item label="服务项目介绍">
        <el-input v-model="lesson.lessonInfo" type="textarea" autosize maxlength="100" autocomplete="off" />
      </el-form-item>
      <el-form-item prop="lessonPrice" label="服务项目价格" required>
        <el-input v-model="lesson.lessonPrice" type="number" autocomplete="off">
          <template slot="append">元</template>
        </el-input>
      </el-form-item>
      <el-form-item label="服务项目图片">
        <el-upload
          class="avatar-uploader"
          name="files"
          :action="url"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" width="360px" height="200px">
          <i v-else class="el-icon-plus avatar-uploader-icon" />
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB,建议上传360*200的图片</div>
        </el-upload>
      <!-- <img v-if="type==2" :src="lesson.lessonImg" width="200px" height="120px"> -->
      </el-form-item>
      <el-form-item label="销量" required>
        <el-input v-model="lesson.buyCount" autocomplete="off" />
      </el-form-item>
      <el-form-item label="时长">
        <el-input v-model="lesson.time" autocomplete="off">
          <template v-if="type==1" slot="append">小时/次</template>
        </el-input>
      </el-form-item>
      <el-form-item label="状态" required>
        <!-- <el-input v-model="lesson.lessonState" autocomplete="off" /> -->
        <el-select v-model="lesson.lessonState" placeholder="请选择">
          <el-option key="0" label="下架" value="0" />
          <el-option key="1" label="上架" value="1" />
        </el-select>
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submit('lesson')">添 加</el-button>
    </div>
  </div>
</template>
<script>

export default {
  data() {
    return {
      lesson: {
        campus: 1,
        lessonFeature: '',
        lessonImg: '',
        lessonInfo: '',
        lessonName: '',
        lessonPrice: '',
        lessonState: '1',
        lessonType: 1,
        time: '',
        buyCount: '0'
      },
      rules: {
        lessonName: [
          {
            required: true,
            message: '服务项目名称不能为空',
            trigger: 'blur'
          },
          { validator: this.validateCharacter, trigger: ['blur', 'change'] }
        ],
        lessonPrice: [
          {
            required: true,
            message: '服务项目价格不能为空',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 特殊字符过滤
    checkSpecificKey(str) {
      var specialKey = "[`~!#$^&*()=|{}':;',\\[\\].<>/?~！#￥……&*（）——|{}【】‘；：”“'。，、？]‘'"
      for (var i = 0; i < str.length; i++) {
        if (specialKey.indexOf(str.substr(i, 1)) !== -1) {
          return false
        }
      }
      return true
    },

    // 验证字符串
    validateFontSize(rule, value, callback) {
      if (value.length < 30) {
        callback()
      } else {
        callback(new Error('字符串长度在1-30之间'))
      }
    },

    // 验证字符串
    validateCharacter(rule, value, callback) {
      if (this.checkSpecificKey(value)) {
        callback()
      } else {
        callback(new Error('请不要输入特殊字符:[`~!#$^&*()=|{}\':;\',\\[\\].<>/?~！#￥……&*（）——|{}【】‘；：”“\'。，、？]‘\''))
      }
    },
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 验证成功,提交
          console.log('成功')
          return true
        } else {
          // 验证失败返回
          console.log('失败')
          return false
        }
      })
    }
  }
}
</script>
